<template>
  <div class="all">
    <!-- header 创建新连接、 -->
    <nav-view />
    
    <div id="main-view">
      <!--  -->
      <!-- 链接tabs -->
      <template>
        <vue-tabs-chrome theme="custom" v-model="tab" :tabs="tabs">11
        </vue-tabs-chrome>
      </template>
      <splitpanes watch-slots>
        <span class="left-content" splitpanes-min="10" splitpanes-size="25" splitpanes-max="40">
          <!-- 数据库列表 -->
          <db-list></db-list>
        </span>

        <span watch-slot splitpanes-size="75" class="right-content">
          <!-- 右侧选项卡 -->
          <el-tabs
            v-model="editableTabsValue"
            @tab-click="rightTabCickHandler"
            type="card"
            closable
            @tab-remove="removeTab"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item._id"
              :label="item.name"
            ></el-tab-pane>
          </el-tabs>
          <!-- SQL 编辑器，包括：mocano、table -->
          <!-- 使用一个状态来保存打开的标签页，防止v-if在每次切换时从新渲染页面 -->
          <sql-view  v-if="this.right_current_tab == 'sql'" />
          <history-view  v-else-if="this.right_current_tab == 'history'" />
          <smart-view  v-else-if="this.right_current_tab == 'smart_view'" />
          <smart-text  v-else-if="this.right_current_tab == 'smart_text'" />
        </span>
      </splitpanes>
    </div>
    <div id="footer">
      <span id="msg">消息</span>
      <span>字符尚云</span>
    </div>
  </div>
</template>

<script>

import Splitpanes from "splitpanes";
import "splitpanes/dist/splitpanes.css";

// import vueTabsChrome from 'vue-tabs-chrome';

import sqlView from "@/views/sql-view";
import historyView from "@/views/history-view";
import smartView from "@/views/smart-view";
import smartText from "@/views/smart-text";

import DbList from "@/views/dbList";

import NavView from "@/views/nav-view";

import { mapState, mapGetters } from "vuex";
export default {
  name: "main-view",
  components: {
    Splitpanes,
    // vueTabsChrome,
    "sql-view": sqlView,
    "history-view":historyView,
    'smart-view':smartView,
    'smart-text':smartText,
    "db-list": DbList,
    "nav-view": NavView
  },
  computed: {
    ...mapState({
      connectlist: state => state.connect.list,
      actionMsg: state => state.ui.actionMsg
    }),
    ...mapGetters({
      opendedsGetter: "connect/openeds",
      closedsGetter: "connect/closeds"
    })
  },
  created() {
    // 初始化连接
    this.initDBConcig();

    this.rightTabCickHandler()
  },
  methods: {
    rightTabCickHandler() {
      this.right_current_tab = this.editableTabs[this.editableTabsValue].key;
    },
    tabClick(tab, event) {
      //
      // console.log(tab, event)
      console.log(this.connectTabsValue);
    },
    initDBConcig() {
      /** 初始化连接 */
      this.$https.post("/query-all-connect").then(
        resp => {
          // 获取所有连接
          let _connects = resp.data.data;
          this.$store.state.connect.list = _connects;
          // TODO  连接所有connect为true的连接，及this.$store.getter[connect/openeds]
        },
        error => {
          console.log("错误：", error);
        }
      );
    },
    removeTab(targetName) {
      console.log("targetName", targetName);
      let tabs = this.opendedsGetter;
      // 1、设置选中
      // 2、更改为connect=false
      let connection = this.opendedsGetter[targetName];
      //
      let _id = connection._id;

      let _editIndex = -1;
      this.$store.state.connect.list.forEach((element, index) => {
        if (element._id == _id) {
          _editIndex = index;
        }
      });
      if (_editIndex !== -1) {
        let item = this.$store.state.connect.list[_editIndex];
        item.connect = false;
        this.$set(this.$store.state.connect.list, _editIndex, item);
      }
    }
  },
  data() {
    return {
      tab: 'google',
      tabs: [
        {
          label: 'google',
          key: 'google',
          closable: false,
          favico: require('../assets/google.jpg')
        },
        {
          label: 'facebook',
          key: 'facebook',
          favico: require('../assets/fb.jpg')
        },
        {
          label: 'New Tab',
          key: 'costom_key',
          favico: (h, { tab, index }) => {
            return h('span', tab.label)
          }
        }
      ],

      right_current_tab: "sql",
      // 左上角数据库连接选项卡
      connectTabsValue: "0",
      
      connectTabs: [
        {
          title: "腾讯云链接",
          name: "1"
        },
        {
          title: "本地链接",
          name: "2"
        },
        {
          title: "本地链接",
          name: "3"
        }
      ],
      // 右侧edit选项卡
      editableTabsValue: "3",
      editableTabs: [
        {
          name: "SQL编辑器",
          key: "sql",
        },
        {
          key: "history",
          name: "历史记录",
        },
        {
          key: 'smart_view',
          name:'智能文书编辑器',
        },
        {
          key: 'smart_text',
          name:'合同',
        }
      ],
      tabIndex: 2
    };
  }
};
</script>

<style lang="less">
.vue-tabs-chrome.theme-custom {
  padding-top: 0;
  background-color: transparent;
  overflow: hidden;
  .tabs-footer,
  .tabs-divider,
  .tabs-background-before,
  .tabs-background-after {
    display: none;
  }
  .tabs-item {
    cursor: pointer;
  }
  .tabs-content {
    overflow: unset;
    border-bottom: 1px solid #e4e7ed;
  }
  .tabs-background {
    padding: 0;
  }
  .tabs-background-content {
    border-top: 1px solid #e4e7ed;
    border-left: 1px solid #e4e7ed;
    border-right: 1px solid #e4e7ed;
    border-radius: 0;
    background-color: #fff;
  }
  .tabs-content {
    height: 40px;
  }
  .active {
    color: #409eff;
    .tabs-background {
      &::before,
      &::after {
        top: 100%;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background-color: #fff;
        z-index: 1;
        position: absolute;
      }
      &::before {
        top: 0;
        height: 2px;
        background-color: #409eff;
      }
    }
  }
}
</style>
<style lang="scss">
.all {
  height: 100%;
  display: flex;
  flex-direction: column;

  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  #footer {
    display: flex;
    justify-content: space-between;

    span {
      font-size: 12px;
      color: white;
      padding: 5px 10px;
    }
  }
}

#main-view {
  overflow: hidden;
  display: flex;
  flex: 1;
  flex-direction: column;
  .right-content {
    // flex: 1;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .left-content {
    height: 100%;
    width: 100%;
  }

  .connect-tabs {
    background-color: white;
    margin-bottom: 5px;
    padding-left: 0.5px;
  }
}

// em.specs {
//   font-size: 0.2em;
//   line-height: 1;
//   position: absolute;
//   color: #999;
//   bottom: 0.5em;
//   left: 0;
//   right: 0;
//   text-align: center;
// }
</style>
